import React,{ useCallback, useState } from 'react';


let Child = (props)=>{
  console.log('Child组件被执行了');
  return (<div> Child </div>)
}

Child = React.memo(Child)

const App = () => {

  const [count,setCount] = useState(100)

  const [name] = useState('小花')
  const [age] = useState(18)


  // 如果说给子组件传递一个对象，那么当 count 值发生改变的时候，会导致
  // info 重新被创建，当重新创建后会得到一个新的对象，那么子组件发现这个
  // 对象和之前缓存的对象不一样了，就会重新执行 Child 子组件
  const info = {
    name,
    age
  }

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={()=>{
        setCount(count + 1)
      }}>加 1</button>

      <hr />

      <Child info={info} />
    </div>
  );
};

export default App;
